import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myflutterproject/basematerialwidgetsdemo.dart';

class AnimatedBuilderDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => AnimatedBuilderState();
}

class AnimatedBuilderState extends State<AnimatedBuilderDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        duration: Duration(milliseconds: 1000), vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedBuilder'),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
        backgroundColor: Colors.blue,
        onPressed: () {
          _animationController.reset();
          _animationController.forward();
        },
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            //动画构建器
            AnimatedBuilder(
                animation: _animationController,
                //动画布局构建
                builder: (context, child) {
                  return Container(
                    margin:
                        EdgeInsets.only(top: 20 * _animationController.value),
                    color: Colors.grey[200],
                    //MediaQuery.of(context).size.width获取屏幕宽度
                    width: MediaQuery.of(context).size.width,
                    height: 300,
                    child: Transform.translate(
                      offset:
                          Offset(0.0, 100 * _animationController.value - 100),
                      child: child,
                    ),
                  );
                },
              child: Column(
                children: [
                  Text('内容一'),
                  Text('内容二'),
                  Text('内容三'),
                ],
              ),

                )
          ],
        ),
      ),
    );
  }
}
